<template>
	<view>
		<!-- 访客 -->
		<view v-if="userType === '1'">
			<visitorVue :about-total="aboutTotal"></visitorVue>
		</view>

		<!-- 被访客 -->
		<view v-if="userType === '2'">
			<interviewedVue :about-total="aboutTotal"></interviewedVue>
		</view>

		<!-- 保安端 -->
		<view v-if="userType === '3'">
			<askariVue :about-total="aboutTotal"></askariVue>
		</view>

		<!-- 其他角色 -->
		<view class="" v-if="!['1', '2', '3'].includes(userType)">
			<otherVue></otherVue>
		</view>


		<view class="news-info" v-if="newAppointment && Object.keys(newAppointment).length"
			@click="handleToDetaols(newAppointment)">
			<view class="news-title">最新预约</view>
			<view class="news-item">
				<view class="item-box">
					<view class="item-title">来访人</view>
					<view class="phone-box">
						<view class="result-text">{{newAppointment.visitorName}}</view>
					</view>
				</view>
				<view class="item-box">
					<view class="item-title">随访人数</view>
					<view class="result-text">{{newAppointment.visitorPeopleNumber}}人</view>
				</view>
				<view class="item-box">
					<view class="item-title">来访时间</view>
					<view class="result-text">{{newAppointment.visitorBeginDate}}</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			暂无最新预约~
		</view>




	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"
	import {
		onShow,
		
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	import methods from '@/utils/methods.js'
	import visitorVue from "../role/visitorVue.vue"; //访客端
	import interviewedVue from "../role/interviewedVue.vue"; //被访端
	import askariVue from "../role/askariVue.vue"; //保安端
	import otherVue from "../role/other.vue";

	const store = useStore()

	//1访客 2被访客 3保安
	const userType = ref('1')
	watch(
		() => store.getters.getRoles,
		(newgetRoles) => {
			if (Array.isArray(newgetRoles) && newgetRoles.length > 0) {
				userType.value = newgetRoles[0];
				getTotal();
			}
		}, {
			immediate: true,
			deep: true,

		}
	);

	//关闭弹出层
	const handleClose = (e) => {
		if (e.show === false) {
			fromList.value.intervieweeName = '';
			fromList.value.intervieweeJobNumber = '';
			fromList.value.intervieweeDepart = '';
			selectedItem.value = ''
		}

	}


	// 预约详情
	const handleToDetaols = (item) => {
		const itemStr = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/record/recordDetails/recordDetails?itemStr=${encodeURIComponent(itemStr)}`
		})
	}


	const newAppointment = ref(null)
	const aboutTotal = ref(0)
	onShow(() => {
		getTotal();
		const needClose = uni.getStorageSync('needCloseFlag');
		// 如果标记存在且为true，执行关闭方法
		if (needClose) {
			handleClose({
				show: false
			});
			visitPopup.value.close()
			uni.removeStorageSync('needCloseFlag');
		}
	});
	onMounted(()=>{
		getTotal();
	})

	const getTotal = () => {
		const auditStatus = userType.value == '3' ? 1 : 0;
		$get('/system/visitorInfo/list', { //查询最新预约记录
			auditStatus: auditStatus
		}).then(res => {
			newAppointment.value = res.rows[0]
			aboutTotal.value = res.total
		})
	}

	//输入框
	const inputCustomStyle = ref({
		padding: '12px 0',
		borderRadius: '6px',
		borderBottom: '1px solid #ddd',
		fontSize: '16px',
		fontWeight: '600',
		color: '#333',
	})
</script>

<style lang="scss">
	.head-info {
		width: 100%;
		height: 190px;
		display: flex;
		justify-content: space-between;

		.info-left {
			width: 50%;
			height: 100%;
			background-image: url('../../../../static/img/bg-1.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border-radius: 15px;


			.pen-box {
				width: 100%;
				height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 6px;
				margin: 20px 0px;

				.invitation-img {
					position: relative;

					.number-invitation {
						position: absolute;
						right: -40%;
						top: -10%;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}



				.pen-img {
					width: 40px;
					height: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pen-text {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}
			}

			.tips {
				width: 100%;
				color: var(--color-999);
				font-size: var(--font-12);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0px 26px;
				box-sizing: border-box;
			}

		}

		.info-right {
			width: 47%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;






			.appointment,
			.qrCode {
				width: 100%;
				height: 46%;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				display: flex;
				align-items: center;
				justify-content: space-around;
				gap: 6px;
				padding: 0px 10px;
				box-sizing: border-box;




				.app-img {
					width: 40px;
					height: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.app-img-record {
					width: 40px;
					height: 36px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.Msg-box {
					position: relative;

					.numberMsg {
						position: absolute;
						right: 0;
						top: 0;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}

				.app-title {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}

				.app-text {
					margin-top: 4px;
					color: var(--color-999);
					font-size: var(--font-12);
				}

			}
		}


	}

	.no-data {
		width: 100%;
		height: 80px;
		text-align: center;
		line-height: 80px;
		color: var(--color-999);
		font-size: var(--font-16);
	}

	.news-info {
		width: 100%;
		height: 200px;
		margin-top: 16px;
		background-image: url('../../../../static/img/bg-2.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 15px;
		padding: 4px 20px;
		box-sizing: border-box;

		.news-title {
			color: var(--color-333);
			font-size: var(--font-16);
			font-weight: bold;
			width: 100%;
			height: 20px;
			padding: 4px 0px;
		}

		.news-item {
			width: 100%;
			height: 80%;
			margin-top: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-title {
					color: var(--color-999);
					font-size: var(--font-16);
				}

				.wait {
					color: var(--color-ff8);
					font-size: var(--font-16);
					font-weight: 800;
				}

				.result-text {
					color: var(--color-333);
					font-size: var(--font-16);
					font-weight: 800;
				}

				.phone-box {
					display: flex;

					.phone {
						width: 14px;
						height: 14px;
						margin-right: 6px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	// 用户弹窗

	.visit-popup {
		width: 90vw;
		padding: 30px;
		box-sizing: border-box;

		.user-input {
			width: 100%;
			// height: 30px;
			padding: 16px 0px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 10px;
			// align-items: center;
			// justify-content: space-between;
			border-bottom: 1px solid #d5d5d5;
			color: var(--color-333);

			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);
			}


			.selected-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 6px;

				.default-text {
					color: var(--color-666);
				}

				.selected-text {
					font-size: var(--font-16);
					font-weight: 600;
					color: var(--color-333);
				}
			}

		}

		.form-item {
			margin-top: 20px;

			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);
			}

			::v-deep .input-placeholder {
				color: #999 !important;

			}

			.NextStep {
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: var(--color-ff);
				font-size: var(--font-16);
				background-color: #2b74e2;
				border-radius: 50px;
				font-weight: 600;
			}


		}
	}
</style>